<div class="modal_timeline">
    <form>
        <div class="results">
            <div class="pipeline_instance_list">
                <ul>
                    <% scope[:pipeline_instances].each_with_index do |pim, i| %>
                        <li id="pim_list_<%= i -%>" class="pim_list clear_float">
                            <%
                               pipeline_label_class = pim.getLabel().length > 18 ? "pipeline_label_truncated" : "pipeline_label"
                            %>
                            <div class="<%= pipeline_label_class %>" title="<%= pim.getLabel() -%>">
                                <%= truncate(pim.getLabel(), :length => 18) -%>
                            </div>
                            <div class="pipeline">
                                <div class="stages clear_float">
                                    <% pim.getStageHistory().each do |sim_for_pipeline| %>
                                        <div style='width: <%= stage_width_em(pim.numberOfStages(), false, 10.9) %>' class="stage inline">
                                            <div class="stage_bar_wrapper">
                                                <div <%= stage_bar_options(sim_for_pipeline) -%>></div>
                                            </div>
                                        </div>
                                    <% end %>
                                </div>
                            </div>
                        </li>
                    <% end %>
                </ul>
                <div id="pagination_bar">
                    <%= render :partial => "shared/pagination_bar.html",
                               :locals => {:scope => {:page_handler => :compare_pipeline_pagination_handler,
                                                      :pagination => scope[:pipeline_instances].getPagination(),
                                                      :handler_args => [scope[:suffix]]}} -%>
                </div>
            </div>
            <div class="pipeline_instance_details">
                <% scope[:pipeline_instances].each_with_index do |pim, i| %>
                    <div id="pim_details_<%= i %>" class="hidden pim_details">
                        <% if scope[:suffix] == "from"
                               compare_href = compare_pipelines_path(:pipeline_name => pim.getName(), :from_counter => pim.getCounter, :to_counter => params[:other_pipeline_counter].to_i)
                           else
                               compare_href = compare_pipelines_path(:pipeline_name => pim.getName(), :from_counter => params[:other_pipeline_counter].to_i, :to_counter => pim.getCounter())
                           end
                        -%>
                        <input type="hidden" class="pipeline_counter" value="<%= compare_href %>">
                        <%= render :partial => "pipeline_autocomplete_list_entry.html.erb", :locals => {:scope => {:pipeline => pim, :disable_stage_bar_href => true}} %>
                    </div>
                <% end %>
            </div>
            <div class="form_buttons actions">
                <a href="javascript:void(0);" class="link_as_button primary_link_as_button" id="timeline_select_button" tabindex="1">Select this pipeline</a>
                <a href="javascript:void(0);" class="link_as_button" id="timeline_cancel_button">Cancel</a>
            </div>
        </div>
    </form>
    <script type="text/javascript">
        Util.on_load(function() {
            jQuery(".pim_list").each(function(i) {
                jQuery(this).dblclick(function(event) {
                    comparePipelines();
                })
                jQuery(this).click(function(event) {
                    jQuery(".pim_details:visible").hide();
                    jQuery(".pim_list.selected").removeClass("selected");

                    jQuery("#pim_list_" + i).addClass("selected");
                    jQuery("#pim_details_" + i).show();
                });
            });

            jQuery(".pim_list:first").addClass("selected").click();

            jQuery("#timeline_cancel_button").click(function() {
                Modalbox.hide();
            });

            jQuery("#timeline_select_button").click(function() {
                comparePipelines();
            });

            function comparePipelines() {
                var url = jQuery(".pim_details:visible").find("input.pipeline_counter").val();
                window.location.href = url;
                Modalbox.hide();
            }
        });
    </script>
</div>
